<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="年度：">
          <el-select v-model="listPram.year" placeholder="年度" clearable class="selWidth">
            <el-option
                v-for="item in yearList"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <el-button icon="el-icon-edit" size="mini" type="primary" @click="handlerUpdate()" v-hasPermi="['admin:fund:plan:save']">保存</el-button>
        </el-form-item>
      </el-form>
<!--      <div class="tips">先在列表中填写单位的年度任务，再勾选，最后点击保存按钮</div>-->
      <el-table :data="listData.list" class="table" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll" v-loading="loading" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column
            type="selection"
            width="50"
        />
        <el-table-column
          prop="departmentId"
          label="ID"
          width="50"
          align="center"
        />
        <el-table-column
            prop="unitName"
            label="单位名称"
            min-width="100"
            align="center"
        />
        <el-table-column prop="taskPlan" label="年度任务(万元)" align="center" min-width="150" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.taskPlan" placeholder="年度任务，单位：万元" style="width:200px;" @focus="onfoucs(scope.row)" @blur="blurTaskPlan(scope.row)" ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="taskPlan" label="状态" align="center" min-width="150" >
          <template slot-scope="scope">
            <el-select v-model="scope.row.status" placeholder="蓝/黄/红单位" clearable style="width: 200px" @change="onChange(scope.row)">
              <el-option
                v-for="(item,index) in statusList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <!--            <el-input v-model="scope.row.taskPlan" style="width:200px;" @focus="onfoucs(scope.row)" @blur="blurTaskPlan(scope.row)" ></el-input>-->
        <el-table-column
          prop="completionFunds"
          label="完成金额(万元)"
          min-width="100"
          align="center"
        />
        <el-table-column
          prop="rate"
          label="完成比例"
          min-width="100"
          align="center"
        />
<!--        <el-table-column-->
<!--          prop="status"-->
<!--          label="状态"-->
<!--          min-width="100"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span :style="'color:'+handleGetLightColor(scope.row.status)">{{scope.row.statusText}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-if="false"
      />
    </el-card>
  </div>
</template>

<script>
import * as fundApi from '@/api/fundApi.js'
import { checkPermi } from "@/utils/permission";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as categoryApi from "@/api/categoryApi";
import {staticCategoryList, staticGuaranteeMethodList, staticProjectStatusList, staticTypeList} from '@/utils/constants'
import {Debounce} from "@/utils/validate";
import Tinymce from '@/components/Tinymce/index'
import { getLightColor } from "@/utils";
import {categoryFundStatusList} from "@/api/categoryApi";
export default {
  // name: "index"
  components: { },
  data() {
    return {
      constants:this.$constants,
      loading:false,
      listData: { list: [] },
      listPram: {
        year:'',
        /*ipAddress: null,
        macAddress: null,
        personId: null,*/
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      multipleSelection: [],//勾选的对象ID

      yearList:[],
      statusList:[],
      id:0,
    }
  },
  mounted() {
    this.initYearList()
    this.initStatusList()
    this.handleGetFundPlanList()
  },
  methods: {
    checkPermi,

    handleSearch() {
      this.listPram.page = 1
      this.handleGetFundPlanList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.handleGetFundPlanList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.handleGetFundPlanList()
    },

    initYearList(){
      this.loading = true

      let myDate = new Date();
      let thisYear = myDate.getFullYear();
      this.listPram.year = thisYear
      for (let i=0;i<5;i++){
        this.yearList.push(thisYear-i)
      }
      this.loading = false
    },
    initStatusList(){
      this.loading = true

      categoryApi.categoryFundStatusList().then(data => {
        this.statusList = data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    handleGetFundPlanList() {
      this.multipleSelection = [] //初始化

      fundApi.getList( this.listPram ).then(data => {
      /*let data = {"page":1,"limit":15,"totalPage":1,"total":2,"list":[
          {"id":1,"year":2023,"departmentId":3,"departmentName":"发改局","taskAmount":50,"finishAmount":30,"finishPercent":"60%","status":63,"statusText":"蓝灯单位"},
          {"id":2,"year":2023,"departmentId":14,"departmentName":"交通局","taskAmount":3000,"finishAmount":30,"finishPercent":"60%","status":64,"statusText":"黄灯单位"},
          {"id":20,"year":2023,"departmentId":14,"departmentName":"税务局","taskAmount":10,"finishAmount":30,"finishPercent":"60%","status":65,"statusText":"红灯单位"},
        ]}*/
        this.listData = data
      })
    },
    handleGetLightColor(status){
      return getLightColor(status)
    },

    //批量保存
    handlerUpdate() {
      if(this.multipleSelection.length === 0){
        this.$message.error("请勾选要保存的数据")
        return
      }
      if(this.listPram.year === '' || this.listPram.year === 0){
        this.$message.error("计划年度错误")
        return
      }

      let errorTips = false;
      this.multipleSelection.forEach((item) => {
        if(!item.taskPlan || !item.status) errorTips = true
      })
      if(errorTips){
        this.$message.error("请设置正确的年度任务或状态")
        return
      }

      fundApi.planAdd({year:this.listPram.year,multiple:JSON.stringify(this.multipleSelection)}).then(data => {
        this.$message.success('保存成功')
        this.handleGetFundPlanList()
      })
    },
    resetQuery(){
      let myDate = new Date();
      let thisYear = myDate.getFullYear();
      this.listPram.year = thisYear
      this.handleGetFundPlanList()
    },

    // 输入框聚焦事件
    onfoucs(row) {
      //1.判断当前input是否被勾选，勾选再朝multipleSelection中添加数据
      if (this.multipleSelection.find((item) => item.departmentId == row.departmentId)) {
        //勾选
        //先删除现有id相同数据
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item.departmentId != row.departmentId
        );
        //再添加
        this.multipleSelection.push({"departmentId":row.departmentId,"taskPlan":row.taskPlan,"status":row.status});
      }
    },
    // 输入框失焦事件
    blurTaskPlan(row) {
      //1.判断当前input是否被勾选，勾选再朝multipleSelection中添加数据
      if (this.multipleSelection.find((item) => item.departmentId == row.departmentId)) {
        //勾选
        //先删除现有id相同数据
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item.departmentId != row.departmentId
        );
        //再添加
        this.multipleSelection.push({"departmentId":row.departmentId,"taskPlan":row.taskPlan,"status":row.status});
      }
    },
    // 选择框聚焦事件
    onChange(row) {
      //1.判断当前input是否被勾选，勾选再朝multipleSelection中添加数据
      if (this.multipleSelection.find((item) => item.departmentId == row.departmentId)) {
        //勾选
        //先删除现有id相同数据
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item.departmentId != row.departmentId
        );
        //再添加
        this.multipleSelection.push({"departmentId":row.departmentId,"taskPlan":row.taskPlan,"status":row.status});
      }
    },

    //勾选/取消
    handleCheckBox(rows, row) {
      if (this.multipleSelection.find((item) => item.departmentId == row.departmentId)) {
        //下面这个filter方法就是删除的方法
        this.multipleSelection = this.multipleSelection.filter(
            (item) => item.departmentId != row.departmentId
        );
      } else {
        //this.multipleSelection.push(row.id);
        this.multipleSelection.push({"departmentId":row.departmentId,"taskPlan":row.taskPlan,"status":row.status});
      }
    },
    //全部勾选/取消
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach((row) => {
          if (!this.multipleSelection.find((item) => item.departmentId == row.departmentId)) {
            //this.multipleSelection.push(row.id);
            this.multipleSelection.push({"departmentId":row.departmentId,"taskPlan":row.taskPlan,"status":row.status});
          }
        });
      } else {
        this.listData.list.forEach((row) => {
          this.multipleSelection = this.multipleSelection.filter(
              (item) => item.departmentId != row.departmentId
          );
        });
      }
    },
    //下面的方法是进行设置行标识key的方法
    getRowKeys(row) {
      return row.departmentId
    },
    // toggleSelection() {
    //   this.$refs.multipleTable.clearSelection();
    // },
  }
}
</script>

<style scoped lang="scss">
  .table .showMore{
    display:block;
    width:100%;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tips{
    height:25px;
    color:#ccc;
  }
</style>
